<template>
    <a-form
      ref="formRef"
      name="advanced_search"
      class="ant-advanced-search-form"
      :model="formdata"
      @finish="onFinishss"
    >
      <a-row :gutter="[16, 0]">
        <a-col 
          class="gutter-row" 
          :span="24 / columnsNum" 
          v-for="item in formItems" 
          :key="item.name">
          <a-form-item
            :name="item.name"
            :label="item.label"
          >
            <FormItme :formItemInfo="item.itemInfo" v-model:value="formdata[item.name]" />
          </a-form-item>
        </a-col>
        <!-- 个性化表单插槽 -->
        <slot name="customFormItem"></slot>
        <!-- 个性化按钮插槽 -->
        <a-form-item v-if="isShowSearchBtns">
          <slot name="customFormBtns"></slot>
        </a-form-item>
      </a-row>
    </a-form>
</template>

<script>
import FormItme from './FormItme.vue'

export default {
  components: {
    FormItme
  },
  props: {
    columnsNum: {
      type: Number,
      defalut: 6
    },
    isShowSearchBtns: {
      type: Boolean,
      defalut: true
    },
    formdata: {
      type: Object,
      defalut: () => ({})
    },
    formItems: {
      type: Array,
      defalut: () => ([])
    },
    onFinish: {
      type: Function,
      defalut: (values) => {}
    },
    
  },

  methods: {
    onFinishss(values) {
      if(isShowSearchBtns){
      this.$emit('onFinish',values)
      }else{
        return values
      }

    },
    /**
     * 主动拿取 form 表单的值
     */
    getFormData() {
      let currentData = this.$refs.formRef.getFieldsValue()
      return currentData
    },
    /**
     *  主动拿取 form 表单某项的值
     */
    getFormFieldValue(name) {
      let currentData = this.$refs.formRef.getFieldsValue()
      return currentData[name]
    }
  },
}
</script>